[ベータ版] Auth0でテンプレートを使用したNewユニバーサルログインページのカスタマイズができるようになりました

#Okta Customer Identity Cloud（Auth0）

#Okta

森亮介

2020.06.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Liquidテンプレートを使ってNewユニバーサルログインページをカスタマイズできるようになったよ　とお知らせがありました。

Auth0のユニバーサルログインには、 ClassicとNewの２パターンのエクスペリエンスが提供されていますが、今回のアップデートはNewが対象です。そして、テナントでカスタムドメインが有効になっている場合にのみ使用できます。

今まで、Newユニバーサルログインページのカスタマイズはロゴの変更、ボタンのプライマリーカラー、バックグラウンドカラーぐらいしかカスタマイズできませんでしたが、今回のアップデートでより柔軟にカスタマイズできるようになる　と説明されています。

※ Newを選んでいてもHTMLカスタマイズは可能ですが、Classicと同じようなページが表示されていました。

参考: ClassicとNewの違い

どういうことが可能になるかというと、ドキュメントに以下のように説明されていました。

グラデーションや背景画像で背景をカスタマイズする

ページレイアウトを変更する

ヘッダーまたはフッターを追加する

アプリケーションまたはユニバーサルログインページに応じて異なるコンテンツを提供する

すべてのページに同じテンプレートが使用されているので、テンプレート１枚を変更していくことになります。

利用可能な変数が決まっていて、変数によって処理を分けたりすることが可能です。

なお、テンプレートに含む必要があるタグがあるので注意が必要です。

auth0:widget : すべてのページに表示されるウィジェットのHTMLが含まれます（ログイン、パスワードのリセットなど）。
auth0:head : ウィジェットのレンダリングに必要なタグが含まれています

簡単な例ですが、ログインページにヘッダーを追加する　といった場合は、以下のコードになります。

<!DOCTYPE html>
<html>
  <head>
    {%- auth0:head -%}
  </head>
  <body>
    {% if prompt.name = "login" %}
    <div style="height:56px;background-color: #000;color:#ffffff;padding:1.375rem 0;"><h1>ここは {{application.name}} のヘッダーです</h1></div>
    {% endif %}
    {%- auth0:widget -%}
  </body>
</html>

prompt.name : レンダリングされるユニバーサルログインプロンプトの名前

このテンプレートを反映させるには、Management APIを利用する必要があります。

curl --request PUT \
  --url 'https://＜＜YOUR_DOMAIN＞＞/api/v2/branding/templates/universal-login' \
  --header 'authorization: Bearer ＜＜MGMT_API_ACCESS_TOKEN＞＞' \
  --header 'content-type: text/html' \
  --data '＜＜反映させたいテンプレートのコード＞＞'

--data にテンプレートコードを入れます(1行に)。

ちなみに、必須のタグがないと以下のエラーが返ってきました.

{"statusCode":400,"error":"Bad Request","message":"The template must contain a single auth0:head tag and at least one auth0:widget tag.","errorCode":"invalid_body"}

APIの実行が終わり、ログインページにアクセスすると、